<template>
  <div>
    <div class="first" @click="$router.push('/pd')">
      <i class="icon-zuo"></i>
      <span>声音创作</span>
    </div>
    <div class="middle">
      <p>本地传值</p>
      <p>自由录制</p>
    </div>
    <div class="last">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="../../assets/lb1.png" alt></van-swipe-item>
  <van-swipe-item><img src="../../assets/lb1.png" alt></van-swipe-item>
</van-swipe>
 
    </div>
    <div class="bb">
      <b>今日必读</b>
      <b>人生百态</b>
      <b>精彩乐平</b>
      <b>情感美文</b>
      <b>今日必读</b>
      <b>人生百态</b>
      <b>精彩乐平</b>
      <b>情感美文</b>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.first {
  height: 1rem;
  font-size: 0.36rem;
  line-height: 1rem;
  color: white;
  font-weight: 600;
}
p {
  width: 3.3rem;
  height: 0.96rem;
  border: 1px solid gray;
  text-align: center;
  line-height: 0.96rem;
  font-size: 0.3rem;
  border-radius: 0.2rem;
  background-color: gainsboro;
}
.middle {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0.36rem;
}
img {
  width: 6.84rem;
  height: 1.96rem;
  display: block;
  margin: auto;
  border-radius: 0.2rem;
  /* margin-left: 0.1rem; */
  /* margin-right: 0.1rem; */
}
.last {
  display: flex;
  flex-shrink: 0;
  overflow-x: scroll;
}
::-webkit-scrollbar {
  display: none;
 } 
.bb{

  font-size: 0.28rem;
  display: flex;
  overflow-x: scroll;
  flex-wrap: nowrap;
  height:1.3rem;
  line-height: 1.30rem;
}
b{
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  flex-shrink: 0;
  display: block;

}
</style>
